<comment>
# 弹窗组件
</comment>
<template>
  <div class="yoyo-dialog-container">
    <el-dialog
      class="yoyo-dialog"
      :title="title"
      :width="width"
      :visible.sync="dialogVisible"
      @close="closeDialog"
    >
      <el-form
        ref="commonFormRef"
        class="common-form"
        :inline="true"
        :model="ModelObject"
      >
        <template v-for="(item, index) in FormItem">
          <el-form-item
            :label="item.label"
            :prop="item.name"
            :rules="item.checked ? ruleChecked(item) : ''"
          >
            <template v-if="item.valueType == 'input'">
              <el-input
                class="common-input"
                v-model.trim="ModelObject[item.name]"
                :placeholder="item.label ? `请输入${item.label}` : ''"
              >
              </el-input>
            </template>
            <template v-if="item.valueType == 'select'">
              <el-select
                class="common-input"
                style="width: 100%"
                v-model="ModelObject[item.name]"
                :placeholder="item.label ? `请输入${item.label}` : ''"
              >
                <el-option
                  v-for="it in item.option"
                  :key="it.value"
                  :label="it.label"
                  :value="it.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <div class="yoyo-dialog-footer">
          <el-button type="primary" @click="handleSubmit('commonFormRef')">确定</el-button>
          <el-button @click="handleReset('commonFormRef')">重置</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'index',
  props:{
    title:{
      type: String,
      default: '弹窗标题'
    },
    width:{
      type: String,
      default: '40%'
    },
    visible:{
      type: Boolean,
      default: false,
    },
    formData:{
      type: Array,
      default: () => []
    },
    formModel:{
      type: Object,
      default: () => {}
    },
    rowId:{
      type: Number,
      default: 0
    }
  },
  data(){
    return {
      ModelObject: {},
      dialogVisible: false,
      FormItem: [],
    }
  },
  watch:{
    formModel:{
      deep: true,
      immediate: true,
      handler(val){
        this.ModelObject = val
      }
    },
    formData:{
      deep: true,
      immediate: true,
      handler(val){
        this.FormItem = val
      }
    },
    visible:{
      deep: true,
      immediate: true,
      handler(val){
        this.dialogVisible = val
      }
    }
  },
  methods:{
    // 点击确定
    handleSubmit(formRef){
      this.$refs[formRef].validate((valid) =>{
        if(valid){
          const data = {
            rowId: this.rowId,
            title: this.title,
            formData: this.ModelObject
          }
          this.$emit('handleAddTable',data)
          this.closeDialog()
        }else{
          console.log('error submit!')
          return false
        }
      })
    },
    // 重置表单
    handleReset(formRef){
      this.$refs[formRef].resetFields()
    },
    // 关闭弹窗
    closeDialog(){
      this.$emit('update:visible',false)
    },
    // 表单校验
    ruleChecked(item){
      var triggerType = ''
      if(item.valueType == 'input'){
        triggerType = 'blur'
      }else if(item.valueType == 'select'){
        triggerType = 'change'
      }
      const rules = {
        required: true,
        trigger: triggerType,
        message: item.label + '不能为空'
      }
      return rules
    },
  }
}
</script>

<style lang="scss" scoped>
.common-form{
  text-align: left;
  .el-form-item{
    margin-right: 40px;
  }
}

</style>

<style lang="scss">
.yoyo-dialog{
  .el-dialog__header{
    text-align: left;
    font-weight: 600;
    background: $dialogHeaderBgColor;
  }
  .el-dialog__title{
    color: $fontColor;
  }
}

</style>
